<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery练习</title>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
div {
	padding: 8px 0px; font-size: 12px; text-align: center; border: solid 1px #888;
}
</style>

  <script type="text/javascript">

	/**
	 * JS原生
	 */

	window.onload=function () {
	    var p = document.getElementById('p1');
	    p.innerHTML='p1，你好';
	    p.style.color='red';

    }
</script>



	<!-- 使用jQuery语法 -->
	<script type="text/javascript">
        $(document).ready(function() {
            /**
             * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象
             * 调用该对象的html()方法进行更改内容
             * 调用该对象的css()方法进行更改颜色样式
             */
            var $p = $('#p2');
            $p.html('P2：您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');
            var $p = $('#div_1');
            $p.html('#div_1调用该对象的html()方法进行更改内容').css('color','black');
            var $p = $(".div_2");
            $p.html('div_2=================').css("border", "3px solid red");
        });

//           var $div = $('div');//jQuery对象
//           var newVar = $div.get(0);//通过get方法，转化成DOM对象
//           newVar.style.color="yellow"   //操作dom对象的属性
	</script>





</head>
<body>



	<div id="div_1"></div>
	<div class="div_2"></div>
	<p id="p1"></p>
	<p id="p2"></p>


</body>
</html>